我們前端進階課程講師是來自於黃米奧老師

--由於老師太低調我沒有照片可以充版面

CSS Animation
CSS animations 使 CSS style configuration 的轉變變得可行。在這種動畫的運作上，你只需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。
CSS animations 有三種好處：
1.可以不用懂JacaScript也可以做出不複雜的動畫
2.資源消耗上CSS animations有優勢，在運作上可適時減少frame量或其他技術減少資源消耗
3.讓瀏覽器來負責動畫的產生過程，如此可以擁有較好的優化

範例貓頭鷹動圖

動圖上面的貓頭鷹不是用gif做的，他是用照片做成的動畫效果
cat-head-animate@2x.png

cat-head@2x.png

index.html

<section class="principle">
    <h2>
        <div class="cat-head">
            <img src="images/cat-head@2x.png" alt="貓頭圖" />
        </div>
        我們的堅持
    </h2>
    <div class="principle-content">
        <ol>
            <li>標示清楚明瞭</li>
            <li>七日內無條件退換</li>
            <li>試用文絕無業配</li>
        </ol>
    </div>
</section>

style.scss

.cat-head {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: #fff url(../images/cat-head-animate@2x.png) no-repeat;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
    background-size: 60px 300px;
    animation-name: speaking;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(4);

    img {
        display: none;
    }
}

RWD Responsiv Web Design
讓網頁在各種不同尺寸的裝置中都能有良好的呈現

實作RWD
在不同的寬度中觀察我業並修正壞掉部分
變更畫面寬度並決定斷點
內容呈現方式不須一成不變
在不同寬度下依需求顯示或隱藏內容

web

ipad pro

iphone